/**
 * ☆☆☆☆☆
 * 知识点：普通js文件 中如何使用 store 中的模块内数据 ? 1. import store from '@/store/store.js'  ===> 2. store.state.login.loginInfo.token
 * 
 * 路由全局导航守卫,没登录不给进 
 *  在 main.js 中导入这个 js 文件
 *    普通js文件 中如何使用 store 中的模块内数据: 1. import store from '@/store/store.js'  ===> 2. store.state.login.loginInfo.token
 * **/
import store from '@/store/store.js'
import router from './index.js'
import { baseRoute } from '@/router/index.js'
import { cloneDeep } from 'lodash'

router.beforeEach((to, from, next) => {
  // 1.判断进入的页面是否需要登录
  console.log('to====>', to);
  if (to.matched.length == 0 || to.matched.some(ele => ele.meta.isLogin)) {  // 需要登录
    // 2.是否已经登录 (vuex 中是否存在 token , 直接在本地中取值)
    if (store.state.login.loginInfo.token) {    //已登录 
      // a. 判断vuex中 menuList 是否有数据 有直接放行，没有则调接口拿
      console.log('store.state.menu.menuList.length', store.state.menu.menuList);
      if (store.state.menu.menuList.length != 0) {  // 有导航
        next()
      } else {   // 没有导航
        // b. 调接口 使得接口返回的数据直接到 vuex 里，不经过这里的守卫
        // bug: 下面的代码会和浏览器的vuex跟踪插件 devtools 冲突产生报错。关闭 devtools  即可
        // 调用这里的方法后返回的是 promis 数据类型, 所以用 .then() 去拿返回出来的结果
        store.dispatch('menu/getMenuAction').then(res => {
          res.forEach(ele => {
            router.addRoute(ele)  //知识点：使用路由方法 addRoute({path:'/',............}) ，往路由根数组中追加数据-最后整合
          })
        })
        next()
      }
    } else {  // 未登录
      next('/login')
    }
  } else { // 不需要登录
    next()
  }
})